<!--加载更多的 自制组件,分割线

应该还有增加是否是虚线的功能


-->

<template>
  <div
    class="bottom-tips__wrapper"
    :style="{ paddingTop: top, paddingBottom: bottom }"
  >
    <span
      class="tips"
      :class="{ 'tips-line': line, dash }"
      :style="{ fontSize: fontSize }"
    >
      <slot>{{ content }}</slot>
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BottomTips',
  props: {
    content: {
      type: String,
    },
    top: {
      type: String,
      default: '10px',
    },
    bottom: {
      type: String,
      default: '10px',
    },
    line: {
      type: Boolean,
      default: true,
    },
    dash: {
      type: Boolean,
      default: false,
    },
    fontSize: {
      type: String,
      default: '',
    },
  },
  setup() {
    return {};
  },
});
</script>

<style scoped lang="scss">
.bottom-tips__wrapper {
  text-align: center;
  overflow: hidden;
}
.tips {
  position: relative;
  font-size: 12px;
  color: rgb(24, 24, 24);
}

.tips-line {
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 80px;
    border-top: 1px solid #ccc;
  }
  &::before {
    left: -90px;
  }
  &::after {
    right: -90px;
  }
}
// 这玩意覆盖就行
.dash {
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 80px;
    border-top: 1px dashed #ccc;
  }
  &::before {
    left: -90px;
  }
  &::after {
    right: -90px;
  }
}
</style>
